
<template>
  <div>
      <el-card v-if="visable" style="">
        <h1 align="center">欢迎您光临智慧书店</h1>
        <!-- <p><i class="el-icon-refresh"></i>提示：模型最初校验与重新校验时可能会稍慢，请耐心等候，或刷新界面重启</p> -->
      </el-card>
      <el-card>
        <div id="box">
            <div class="box1">
            <video id="webcam" width="400" height="300" playsinline loop></video>
                <canvas id="face_canvas" width="400" height="300"></canvas>
            </div>
            <div class="box3">
            <h1><i class="el-icon-loading"></i></h1>
            </div>
            <div class="box3">
            <h1><i class="el-icon-loading"></i></h1>
            </div>
            <div class="box2">
            <canvas id="face_model" width="400" height="300"></canvas>
            </div>
        </div>
    </el-card>
    <div v-if="foundFace">
        找到人脸，进行支付方法的调用
    </div>
  </div>
</template>
<!--  <script src="../assets/js/clmtrackr.js"></script>-->
<script src="../../../public/assets/js/clmtrackr.js"></script>
<script>
  // import '../../assets/js/clmtrackr.js';
  import '../../../public/assets/js/clmtrackr';


  export default {
    name: 'testTracking',
    data() {
			return {
			  webcam: '',
			  face_canvas: '',
			  face_model:'',
			  face_canvas_ctx:'',
			  face_model_ctx:'',
			  ctracker: '',
			  visable:true,
			  imageBase64:'',
			  foundFace:false,
			}
		  },
		mounted() {
			this.initWebCam()
		},
		methods: {
			initWebCam() {
				this.webcam = document.getElementById('webcam');
			    this.face_canvas = document.getElementById('face_canvas');
				this.face_model = document.getElementById('face_model');
				this.face_canvas_ctx = face_canvas.getContext('2d');
				this.face_model_ctx = face_model.getContext('2d');
				console.log(this.webcam)
				console.log(this.face_canvas)
				this.initClmTrackr();
				this.openCam();
			},
			initClmTrackr() {
				this.ctracker = new clm.tracker();
				this.ctracker.init();
			},
			getUserMedia(constrains, success, error) {
				if (navigator.mediaDevices.getUserMedia) {
					//最新标准API
					navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
				} else if (navigator.webkitGetUserMedia) {
					//webkit内核浏览器
					navigator.webkitGetUserMedia(constrains).then(success).catch(error);
				} else if (navigator.mozGetUserMedia) {
					//Firefox浏览器
					navagator.mozGetUserMedia(constrains).then(success).catch(error);
				} else if (navigator.getUserMedia) {
					//旧版API
					navigator.getUserMedia(constrains).then(success).catch(error);
				} else {
					//this.scanTip = "你的浏览器不支持访问用户媒体设备"
				}
			},
			openCam(){
				//let video = this.webcam;
				this.getUserMedia(
					{video : true}
					, this.onStreaming, this.onStreamingError)
			},
			onStreaming(stream) {
				this.webcam.srcObject = stream;
				//console.log("-->" + this.ctracker);
				this.ctracker.start(this.webcam);
				this.webcam.play();   // 播放
				this.detect();
			},
			onStreamingError(e) {
				console.log("访问用户媒体失败" + e.name + "," + e.message);
			},
			// 持续监测人脸
			detect() {
				// 检查是否检测到人脸
				requestAnimationFrame(this.detect);
				let currentPosition = this.ctracker.getCurrentPosition();
				console.log(currentPosition);
				this.face_canvas_ctx.clearRect(0, 0, 400, 300);
				if (currentPosition) {
					//在overlay canvas上画出检测到的人脸:
					this.ctracker.draw(this.face_canvas);
					if(!this.foundFace){
						this.takephoto();
						this.foundFace = true;
						setTimeout(()=>{
								//alert("--");
								this.foundFace = false;
							},10000);
					}
				}
			},
			takephoto(){
				this.face_model_ctx.drawImage(this.webcam, 0, 0, this.webcam.width, this.webcam.height)
				this.imageBase64 = this.saveAsPNG(this.face_model)
			},
			saveAsPNG(c) {
                return c.toDataURL('image/png', 0.3)
            }
		}
  }
</script>
<style>/*webcam和canvas标签位置重合使显示出来的人脸模型和视频重合*/
    #box {
        width: 100%;
        height: 350px;
        display: flex;
    }
    .box1 {
        position: relative;
        width: 50%;
        flex: 4;
    }
    .box3 {
        flex: 1;
        text-align: center;
        line-height: 300px;
    }
    .box2 {
        position: relative;
        width: 50%;
        flex: 4;
    }
    #face_canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #ccc;
        border-radius: 20px;
    }
    #face_model {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #000000;
        border-radius: 20px;
        color: #fff;
        background: #000;
    }
    #webcam {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #333;
        border-radius: 20px;
        background: #666;
    }
</style>
